<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>渲染流动线</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>
<body id="body">
<div id='map'></div>
<div class="opt_panel">
    流动速度:<input type="range" value="5" max="180" min="2" step="1" oninput="changeSpeed(event)"><br>
    线段长度:<input type="range" value="5" max="150" min="1" step="1" oninput="changeSeg(event)"><br>
    线段宽度:<input type="range" value="4" max="20" min="1" step="1" oninput="changeWidth(event)"><br>
    线路颜色:
    <button onclick="changeColor()">换色</button>
    <button onclick="changeVisible()">显示/隐藏</button>
    <button onclick="stopFlow()">停止</button>
    <button onclick="startFlow()">开始</button>
    <button onclick="destroyFlow()">销毁</button>
</div>
</body>
</html>

<script>
    function changeVisible(){
        let visible = flowLayer.getVisible()
        flowLayer.setVisible(!visible)

        let visible2 = flowLayer2.getVisible()
        flowLayer2.setVisible(!visible2)
    }

    function stopFlow(){
        flowLayer.stop()
        flowLayer2.stop()
    }

    function startFlow(){
        flowLayer.start()
        flowLayer2.start()
    }

    function destroyFlow(){
        flowLayer.destroy()
        flowLayer2.destroy()
    }

    function changeSpeed(e) {
        let _speed = Number(e.target.value)
        flowLayer.setSpeed(_speed)
        flowLayer2.setSpeed(_speed)
    }

    function changeSeg(e) {
        let _seg = Number(e.target.value)
        flowLayer.setSegLen(_seg)
        flowLayer2.setSegLen(_seg)
    }

    function getRandomColor() {
        return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')'
    }

    function changeColor() {

        let tmpColor = getRandomColor()
        let colors1 =
            [
                getRandomColor(),
                tmpColor, tmpColor, tmpColor, tmpColor, tmpColor, tmpColor
            ]
        flowLayer.setColors(colors1)


        let colors2 =
            [
                getRandomColor(), tmpColor, getRandomColor()
            ]
        flowLayer2.setColors(colors2)


    }

    function changeWidth(e) {
        let _width = Number(e.target.value)
        flowLayer.setLineWidth(_width)
        flowLayer2.setLineWidth(_width)
    }


    var flowLayer = null
    var flowLayer2 = null
    var speed = 5;

    function initPage() {

        flowLayer = new egisV2.layer.FlowLayer({
            map: map,
            lineWidth: 4,//线宽
            colors: ['#ffffff', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue'],//一个颜色的数组
            segLen: 4,//一组颜色组合承德线段长度（这是个相对值）
            speed: 10//流动的速度默认是5，越大流动速度越快
        })
        let lineDatas = [
            {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'coordinates':
                        [
                            [
                                [118.19684094526441, 24.524179458309092],
                                [118.20184666772139, 24.468541613793292],
                                [118.15876169942943, 24.429971132472502]
                            ],
                            [
                                [118.19684094526441 + 0.1, 24.524179458309092],
                                [118.20184666772139 + 0.1, 24.468541613793292],
                                [118.15876169942943 + 0.1, 24.429971132472502]
                            ]

                        ]
                    ,
                    'type': 'MultiLineString'
                }
            }
        ]

        for (let i = 0; i < 1000; i++) {
            lineDatas.push(
                {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'coordinates':
                            [
                                [
                                    [118.19 + i * 0.01, 24.524179458309092],
                                    [118.20 + i * 0.01, 24.468541613793292],
                                    [118.15 + i * 0.01, 24.429971132472502]
                                ]
                            ]
                        ,
                        'type': 'MultiLineString'
                    }
                }
            )
        }

        flowLayer.setDatas(lineDatas)

        flowLayer.start()


        flowLayer2 = new egisV2.layer.FlowLayer({
            map: map,
            lineWidth: 6,
            colors: ['#ff0200', '#ffc000', '#fbff00', '#36ff00', '#008fcc', '#003bff', '#a403ff'],
            segLen: 2,
            speed: 5//暂时无法控制
        })

        let lineDatas2 = [
            {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'coordinates': [
                        [118.18794094526441, 24.524179458309092],
                        [118.19294666772139, 24.468541613793292],
                        [118.14986169942943, 24.429971132472502]
                    ],
                    'type': 'LineString'
                }
            }
        ]
        flowLayer2.setDatas(lineDatas2)

        flowLayer2.start()
    }


    window.onload = function () {
        loadGeoMap(initPage)
    }

</script>
